<template>
  <div :class="['column-select', align]" @click="handleClick">
    <div>
      <el-select
        ref="select"
        v-model="localModelValue"
        :placeholder="title"
        :multiple="multiple"
        :collapse-tags="multiple"
        @change="change"
      >
        <el-input v-if="search" v-model="text" style="padding: 10px" link size="small" clearable placeholder="搜索" />
        <el-option
          v-for="(item, index) in options"
          :key="index"
          class="xlsize"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
    </div>
    <span>{{ title }}</span>
    <svg-icon style="flex-shrink: 0" icon-class="shai" />
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'
const props = defineProps({
  title: String,
  list: {
    type: Array<{ text: string; value: string }>,
    default: () => [],
  },
  modelValue: {
    type: [String, Number, Array<String>],
    default: () => '',
  },
  multiple: Boolean,
  search: Boolean, // 是否支持搜索
  align: {
    type: String,
    default: 'center',
  },
})
const text = ref('')
const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number | Array<string | number>): void
}>()

const select = ref()
const handleClick = () => {
  select.value.toggleMenu()
}
// 搜索筛选
const options = computed(() => {
  if (text.value) {
    let options = props.list.filter(item => item.text.includes(text.value))
    if (options.length == 0) {
      return [props.list[0]]
    }
    return options
  }
  return props.list
})
// 监听父组件传值
const localModelValue = ref<any>(props.modelValue)
watch(
  () => props.modelValue,
  newVal => {
    localModelValue.value = newVal
  }
)
// 用户选择
const change = () => {
  emit('update:modelValue', localModelValue.value)
}
</script>

<style scoped lang="scss">
.column-select {
  min-height: 23px;
  width: 100%;
  padding-left: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  &.left {
    justify-content: flex-start;
    padding: 0;
  }
  &.right {
    justify-content: flex-end;
  }
  .el-input__inner {
    width: 40px;
  }
  ::v-deep .el-input__inner {
    height: 23px;
    line-height: 23px;
  }
  .el-select {
    position: absolute;
    top: -5px;
    z-index: -1;
    visibility: hidden;
    // width: 0;
    // height: 0;
    overflow: hidden;
    ::v-deep .el-select__tags {
      width: 0 !important;
      height: 0 !important;
      position: absolute;
      top: 0 !important;
      overflow: hidden;
    }
    ::v-deep .el-input__inner {
      width: 0 !important;
      height: 0 !important;
    }
  }
}
</style>
